<template>
  <div class="upload-box">
    <span class="close" @click="setclose"
      ><i class="el-icon-circle-close"></i
    ></span>
    <div class="center">
      <div class="title">
        <p>请设置视频标题(最大字数不超过30)</p>
        <div class="input">
          <el-input
            v-model="input"
            maxlength="30"
            minlength="1"
            placeholder="请输入标题"
          ></el-input>
        </div>
      </div>
      <div class="tag">
        <p>请选择视频分区</p>
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in category"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </div>

      <div class="up-img">
        <p>上传封面图片</p>
        <div class="img">
          <van-uploader
            v-model="imgList"
            multiple
            :max-count="1"
            preview-size="6.5vw"
          />
        </div>
      </div>
      <div class="up-vedio">
        <p>上传视频</p>
        <el-upload
          class="upload-demo"
          ref="upload"
          action=""
          :file-list="fileList"
          :auto-upload="false"
          :limit="1"
          :on-change="handleChange"
        >
          <el-button slot="trigger" size="small" type="primary"
            >选取文件</el-button
          >
          <div slot="tip" class="el-upload__tip">
            最多可以上传一个视频，推荐mp4格式，最好不超过50M
          </div>
        </el-upload>

        <footer>
          <el-button
            style="margin: 1vh 7vw; background-color: #02a1d6"
            size="small"
            type="success"
            @click="uploadFile(1)"
          >
            上传
          </el-button>

          <el-button
            style="margin-left: 10px"
            size="small"
            type="success"
            @click="uploadFile(0)"
            >保存为草稿</el-button
          >
        </footer>
      </div>

      <div class="bg"></div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  props: ["video"],
  computed: {
    ...mapGetters(["user", "isLogin", "baseUrl"]),
  },
  data() {
    return {
      imgList: [],
      fileList: [],
      fileObj: null,
      category: [],
      value: "",
      input: "",
    };
  },
  methods: {
    async init() {
      // get tags
      const { data: res } = await this.$http.get("/tags");
      this.category = res.data;
      this.value = res.data[0].id;

      //修改： 初始化标题和分类
      if (this.video) {
        this.input = this.video.title;
        this.value = this.video.tid;
      }
    },

    handleChange(file) {
      const isLt500M = file.size / 1024 / 1024 < 50;
      if (!isLt500M) {
        this.$msg.fail("文件大小不超过50M");
        return;
      }
      if (
        ["mp4", "ogg", "flv", "avi", "wmv", "rmvb", "mov"].indexOf(
          file.name.split(".").pop().toLowerCase()
        ) == -1
      ) {
        this.$msg.fail("请上传正确格式文件");
        return;
      }
      this.fileObj = file;
    },
    async uploadFile(status) {
      if (this.input.trim() == "") {
        this.$msg.fail("视频标题不能为空");
        return;
      }

      if (this.imgList[0] == undefined && !this.video) {
        this.$msg.fail("请选择封面图片");
        return;
      }

      const form = new FormData();


      if(this.imgList[0] != undefined)
      {
        form.append("img", this.imgList[0].file);
      }
      if( this.fileObj != null){
        form.append("video", this.fileObj.raw);
      }
  
      form.append("title", this.input);
      form.append("tid", this.value);
      form.append("status", status);
      form.append("uid", this.user.id);
      
      let config = {
        headers: { "Content-Type": "multipart/form-data" },
      };
      var url = "/videos";
      // 修改
      if (this.video) {
        url += "/update";
        form.append("vid", this.video.id);
      }
      const { data: res } = await this.$http.post(url, form, config);
      if (res.code == 200) {
        this.$msg.fail("上传成功！");
        this.input = "";
        this.value = "";
        this.imgList = [];
        this.fileList = [];
        this.fileObj = null;
        this.video = null
        this.$emit("uploadViewClose");
      }
    },

    setclose() {
      this.$emit("uploadViewClose");
    },
  },
  created() {
    this.init();
  },
};
</script>

<style lang='less'>
.upload-box {
  z-index: 99;
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1px solid black;
  border: 1px solid #eee;
  border-radius: 1vw;
  box-shadow: 0px 1px 2px 3px #eee;
  overflow: hidden;
  background-color: white;

  .center {
    width: 90%;
    margin: auto;
    height: 100%;
  }

  footer {
    position: absolute;
    bottom: 2vh;
  }
}

.input {
  width: 60%;
  margin-bottom: 3vh;
}
.close {
  margin-left: 95%;
  cursor: pointer;
  i {
    padding-top: 2vh;
    color: #02a1d6;
  }
}
</style>